import React, { Component } from 'react';
import { Card, Form, Input, Button, Checkbox, message } from 'antd';
import logoSrc from 'assets/logo.png';
import './index.scss';
import { login } from 'api/user';
import { setToken } from 'utils/storage';
export default class Login extends Component {
	// 点击登录事件
	handleLoginVerify = async (userInfo) => {
		try {
			// 解构用户输入的数据
			const { mobile, code } = userInfo;
			// 解构token
			const { token } = await login({ mobile, code });
			// 本地存储实现持久性化存储
			setToken(token);
			// react编程式导航跳转
			this.props.history.push('/');
			// 提示用户登录成功
			message.success('登录成功');
		} catch (error) {
			// 提示用户登录失败的原因
			message.error(error.response.data.message);
		}
	};
	render() {
		return (
			<div className="login">
				<Card className="login-container">
					<img src={logoSrc} className="login-logo" alt="" />
					<Form
						className="login-form"
						autoComplete="off"
						// 当用户满足所有的规则时，调用的事件
						onFinish={this.handleLoginVerify}
						// 给下面的输入框赋初始值
						initialValues={{
							mobile: '13911111111',
							code: '246810',
							agree: true,
						}}
					>
						<Form.Item
							name="mobile"
							// form表单验证的规则
							rules={[
								{ required: true, message: '手机号码不能为空' },
								{
									pattern: /^1[3|4|5|7|8][0-9]{9}$/,
									message: '请输入手机号码为11为的数字',
								},
							]}
						>
							<Input placeholder="请输入手机号码" />
						</Form.Item>
						<Form.Item
							name="code"
							rules={[
								{ required: true, message: '验证码不能为空' },
								{
									pattern: /^\d{6}$/,
									message: '请输入6位验证码的数字',
								},
							]}
						>
							<Input placeholder="请输入6位数的验证码" />
						</Form.Item>
						<Form.Item
							name="agree"
							valuePropName="checked"
							rules={[
								{
									// 自定义校验规则
									validator: (_, value) =>
										value
											? Promise.resolve()
											: Promise.reject(
													new Error(
														'请认真阅读【隐私条款】和【用户协议】'
													)
											  ),
								},
							]}
						>
							<Checkbox>
								我已阅读并同意【隐私条款】和【用户协议】
							</Checkbox>
						</Form.Item>
						<Form.Item>
							<Button type="primary" block htmlType="subimt">
								登录
							</Button>
						</Form.Item>
					</Form>
				</Card>
			</div>
		);
	}
}
